<template>
  <div>
    <article-templates :data="articleData">
      <template #article>
        <page-wrapper />
        <div>
          <title-card title="安装依赖"></title-card>
          <pre-code :code="code1" language="bash" />

          <title-card title="导入依赖"></title-card>
          <pre-code :code="code2" language="JavaScript" />

          <title-card title="文件导入"></title-card>
          <pre-code :code="code3" language="TypeScript" />
        </div>
      </template>
    </article-templates>
  </div>
</template>

<script setup name="ImportExcel" lang="ts">
import ArticleTemplates from '@/components/ArticleTemplates/index.vue';
import TitleCard from "@/components/TitleCard/index.vue";
import PageWrapper from "./components/PageWrapper.vue"
import { postArticleDetail } from '@/api/home.js';
import { onMounted, ref, toRefs, reactive } from 'vue';

const data = reactive({
  articleData: {},
});
const { articleData } = toRefs(data);

const code1 = ref(`npm install xlsx --save`);
const code2 = ref(`import * as XLSX from 'xlsx' // vue3可用此引入
import XLXS from "xlsx"; // vue2可用此引入`);
const code3 = ref(`/**
* @description: 第一行作为头部
*/
function getHeaderRow(sheet: XLSX.WorkSheet) {
  if (!sheet || !sheet['!ref']) return [];
  const headers: string[] = [];
  // A3:B7=>{s:{c:0, r:2}, e:{c:1, r:6}}
  const range = XLSX.utils.decode_range(sheet['!ref']);

  const R = range.s.r;
  /* start in the first row */
  for (let C = range.s.c; C <= range.e.c; ++C) {
    /* walk every column in the range */
    const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })];
    /* find the cell in the first row */
    let hdr = 'UNKNOWN ' + C; // <-- replace with your desired default
    if (cell && cell.t) hdr = XLSX.utils.format_cell(cell);
    headers.push(hdr);
  }
  return headers;
}

/**
 * @description: 获得excel数据
 */
function getExcelData(workbook: XLSX.WorkBook) {
  const excelData: ExcelData[] = [];
  const { dateFormat, timeZone } = props;
  for (const sheetName of workbook.SheetNames) {
    const worksheet = workbook.Sheets[sheetName];
    const header: string[] = getHeaderRow(worksheet);
    let results = XLSX.utils.sheet_to_json(worksheet, {
      raw: true,
      dateNF: dateFormat, //Not worked
    }) as object[];
    results = results.map((row: any) => {
      for (let field in row) {
        if (row[field] instanceof Date) {
          if (timeZone === 8) {
            row[field].setSeconds(row[field].getSeconds() + 43);
          }
          if (dateFormat) {
            row[field] = dateUtil(row[field]).format(dateFormat);
          }
        }
      }
      return row;
    });

    excelData.push({
      header,
      results,
      meta: {
        sheetName,
      },
    });
  }
  return excelData;
}

/**
 * @description: 读取excel数据
 */
function readerData(rawFile: File) {
  loadingRef.value = true;
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = async (e) => {
      try {
        const data = e.target && e.target.result;
        const workbook = XLSX.read(data, {
          type: 'array',
          cellDates: true,
        });
        // console.log(workbook);
        /* DO SOMETHING WITH workbook HERE */
        const excelData = getExcelData(workbook);
        emit('success', excelData);
        resolve('');
      } catch (error) {
        reject(error);
        emit('error');
      } finally {
        loadingRef.value = false;
      }
    };
    reader.readAsArrayBuffer(rawFile);
  });
}

async function upload(rawFile: File) {
  const inputRefDom = unref(inputRef);
  if (inputRefDom) {
    // fix can't select the same excel
    inputRefDom.value = '';
  }
  await readerData(rawFile);
}

/**
 * @description: 触发选择文件管理器
 */
function handleInputClick(e: Event) {
  const files = e && (e.target as HTMLInputElement).files;
  const rawFile = files && files[0]; // only setting files[0]
  if (!rawFile) return;
  upload(rawFile);
}

/**
 * @description: 点击上传按钮
 */
function handleUpload() {
  const inputRefDom = unref(inputRef);
  inputRefDom && inputRefDom.click();
}`);

const getTitle = () => {
  postArticleDetail({
    route: 'ImportExcel',
  }).then((res) => {
    articleData.value = res.data;
  });
};
onMounted(() => {
  getTitle();
});
</script>